import { faker } from "@faker-js/faker";
import { defineComponent, ref, watch } from "vue";
import Button from "../components/Button";

const WatchDemo = defineComponent({
  setup() {
    const name = ref("watch demo");

    const changeName = () => {
      name.value = faker.person.firstName();
    };

    watch(name, (newName, _oldName) => {
      console.log("new name: ", newName);
    });

    return () => (
      <div>
        <Button onClick={changeName}>Change</Button>
        {name.value}
      </div>
    );
  },
});

export default WatchDemo;
